require([
  'jquery',
  'pageInit',
  'dataTable',
  'loading',
  'bootstrap-dialog'
], function($, vamakerPage, VamDataTable, VamLoader, BootstrapDialog) {
  $(function() {
    var 
      $dataTable = $('#data-table'),
      dataUrl = VAM.getVar('CREATIVE_TEMPLATE_DATA_LIST'),
      $reportDataThead = $dataTable.find('thead'),
      $filterFrm = $('#filter-frm'),
      $filterCreative = $filterFrm.find('input[name="filter-creative"]'),
      $loadingWrap = new VamLoader().loader($('#list-loading-wrap')),
    listTable, tableOptions = {};
    // Table settings.
    tableOptions = {
      'ajax': {
        'url': dataUrl
      },
      // 'order': [5,'desc'],
      'order': [3,'desc'],
      'columns': [
        {'data': 'id'},
        {'data': 'name'},
        {'data': 'template'},
        // {'data': 'type'},
        // {'data': 'creativeType'},
        {'data': 'modifiedDate'},
        // {'data': 'operate'}
      ],
      'columnDefs': [
        {
          // 'targets': [0,2,3,4,5],
          'targets': [0,2,3],
          'render': function (data, type, full, meta) {
            return '<p title="' + data + '">' + data +'</p>'
          }
        },
        {
          'targets': 1,
          'render': function (data, type, full, meta) {
            // return '<code>' + data + '</code>'
            return '<p title=\''+ data +'\'><code>' + data + '</code></p>'
          }
        },
        // {
        //   'targets': -1,
        //   'visible': false,
        //   'render': function (data, type, full, meta) {
        //     return '<div class="tab-btn-group">'
        //           + '<input class="row-info" type="hidden" value="' + full.id + '">'
        //           // + '<button class="btn btn-primary btn-xs tab-edit" title="编辑"><i class="fa fa-edit"></i></button>'
        //           // + '<a href="' + (full.creativeType === 'mobile-web'?VAM.getVar('WEB_TEMPLATE_EDIT_URL'):VAM.getVar('APP_TEMPLATE_EDIT_URL'))+ '?id=' + full.id + '" class="btn btn-primary btn-xs tab-edit" data-loading-text="加载中..." title="编辑"><i class="fa fa-edit"></i></a>'
        //           // + '<button class="btn btn-info btn-xs tab-report" title="报表"><i class="fa fa-file-text"></i></button>'
        //           // + '<button class="btn btn-success btn-xs tab-preview" data-type="preview" data-role="' + full.creativeType + '" data-loading-text="<i class=\'fa fa-spinner fa-spin\'></i>" type="button" title="创意模板预览"><i class="fa fa-eye"></i></button>'
        //           + '</div>';
        //   }
        // }
      ]
    };
    $dataTable
    .on('preXhr.dt', function(evt) {
      $loadingWrap.show();
    });
    listTable = new VamDataTable().dataTables($dataTable, tableOptions);
    // After table data list.
    listTable.on('xhr.dt', function(evt) {
      $loadingWrap.fadeOut();
    });
    // Template Preview
    $dataTable.on('click', 'tbody td .tab-preview', function(evt) {
      var $me = $(this),
      $rowInfo = $me.siblings('.row-info'),
      opId = $rowInfo.val(),
      opType = $me.data('type'),
      opRole = $me.data('role'),
      opData, creativeIfrUrl,
      previewOpUrl;
      evt.preventDefault();
      previewOpUrl = opRole === 'mobile-web' ? VAM.getVar('LIST_PREVIEW_WEB_OP_URL') : VAM.getVar('LIST_PREVIEW_APP_OP_URL');
      creativeIfrUrl = previewOpUrl + '?id=' + opId + '&type=' + opRole;
      BootstrapDialog.show({
        title: VAM.j('Creative Template Preview'),
        size: BootstrapDialog.SIZE_WIDE,
        message: $('<iframe id="creative-preview-ifr" frameborder="0" style="width: 100%; min-height: 500px;" src="' + creativeIfrUrl + '"></iframe>'),
        buttons: [{
          label: VAM.j('Close'),
          cssClass: 'btn-default',
          action: function(dialogItself) {
            dialogItself.close();
          }
        }]
      });
    });
    // Creative Type Filter
    $filterCreative.on('change', function(evt) {
      var $me = $(this),
      meVal = $me.val();
      column = $me.data('column');
      evt.preventDefault();
      $filterCreative.parent().removeClass('active');
      $me.parent().addClass('active');
      listTable.columns(column).search(meVal).draw();
    });
  });
});
